<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Welcome<br>-->
<!--<input id = "text" type="text"/><button onclick="send()">Send</button><button onclick="closeWebSocket()">Close</button>-->
<!--<div id="message"></div>-->

Welcome<br>
<input id="text" type="text"/><button onclick="send()">Send</button><button onclick="closeWebsocket()">Close</button>
<div id="message"></div>
</body>

<script text="text/javascript">
    var websocket = null;

//    判断当前浏览器是否支持websocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8899/websocket")
    }
    else{
        alert("Not support websocket")
    }

    //客户端初始化一个wesocket，当服务端相应以后，会触发open事件，onopen是open事件的回调方法
    //连接成功建立的回调方法


    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //    当连接错误时的回调方法，将信息显示在html页面上
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    }


    //服务器接收到消息时的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }



    //连接关闭时候的回调方法
    websocket.close = function(){
        setMessageInnerHTML("close");
    }

//    监听窗口关闭事件，当窗口关闭时，主动去关闭websocket
    window.onbeforeunload = function(){
        websocket.close();
    }

//    将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById("message").innerHTML += innerHTML+'<br/>';
    }

    //    发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
        document.getElementById('text').value = "";
    }

    //    关闭连接
    function closeWebSocket(){
        websocket.close();
    }


   // 总结：websocket客户端的写法
   //  1.判断当前浏览器是否支持websocket
   //  2.建立连接时候的回调函数  onopen（event）
   //  3.连接错误时的回调函数  onerror（）
   //  4.服务器接收消息时的回调函数 onmessage（event）
   //  5.连接关闭时候的回调函数 close
   //  6.浏览器窗口关闭时候的回调函数   onbeforeunload（）



</script>
</html>